 <template>
  <div>
    <!-- 选择课程 -->
    <el-dialog title="添加客服" :visible.sync="dialogVisible" width="60%">
      <div>
        <el-input
          type="textarea"
          rows="4"
          v-model.trim="phoneNumber"
          clearable
          placeholder="录入内测用户手机号（手机号用“, ”隔开）"
        ></el-input>
      </div>
      <div slot="footer">
        <el-button
          class="filter-item add-style"
          style="margin-left: 10px;"
          type="primary"
          @click="handleCreate"
          size="mini"
        >添加</el-button>
      </div>
    </el-dialog>

    <el-dialog title="创建结果" :visible.sync="resultVisible" width="60%">
      <div>
        <div>
          <h3>号码已存在</h3>
          <div>
            <span v-if="resultData.existPhones.length === 0">无</span>
            <span v-for="(item, index) in resultData.existPhones" :key="index">{{item}}</span>
          </div>
        </div>
        <hr>
        <div>
          <h3>用户不存在</h3>
          <div>
            <span v-if="resultData.noneUser.length === 0">无</span>
            <span v-for="(item, index) in resultData.noneUser" :key="index">{{item}}</span>
          </div>
        </div>
        <hr>
        <div>
          <h3>号码已添加</h3>
          <div>
            <span v-if="resultData.successPhones.length === 0">无</span>
            <span v-for="(item, index) in resultData.successPhones" :key="index">{{item}}</span>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button
          class="filter-item add-style"
          style="margin-left: 10px;"
          type="primary"
          @click="resultVisible = false"
        >关闭</el-button>
      </div>
    </el-dialog>

    <!-- 已配置内测用户 -->
    <div class="filter-container">
      <div>
        <el-button
          class="filter-item add-style"
          style="margin: 10px;"
          type="primary"
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click="dialogVisible = true"
        >添加</el-button>
      </div>
    </div>

    <tTable :columns="columns" :data="tableData">
      <!-- 头像 -->
      <template v-slot:avatar="slotProps">
        <img :src="slotProps.scope.row.avatar" class="avatar" alt>
      </template>

      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          @click.native.prevent="deleteRow(slotProps.scope.row.id)"
          type="danger"
          size="mini"
        >删除</el-button>
      </template>
    </tTable>
  </div>
</template>

<script>
import { getContact, addContact, deleteContact } from "api/profile";
import { formatDateTime } from "src/util/time.js";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      phoneNumber: "", //输入得手机号码
      dialogVisible: false, // 是否显示添加模态框
      tableData: [], // 内测用户数据
      multipleSelection: "", // 多选
      resultVisible: false, // 结果显示页面
      resultData: {
        existPhones: [],
        noneUser: [],
        successPhones: []
      }, // 添加结果

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "nickName", label: "用户名" }
        },
        {
          slot: "avatar",
          attr: { prop: "avatar", label: "头像" }
        },
        {
          attr: { prop: "phone", label: "手机号码" }
        },
        {
          attr: { prop: "createTime", label: "注册时间" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "220" }
        }
      ]
    };
  },
  components: { tTable },
  mounted() {
    this.getData(1);
  },
  methods: {
    deleteRow: function(id) {
      this.$confirm("确认删除客服么").then(_ => {
        deleteContact(id).then(res => {
          this.getData();
          this.$message.success("删除成功");
        });
      });
    },
    handleCreate: function() {
      if (!this.phoneNumber) return;

      addContact(this.phoneNumber).then(res => {
        if (res === true) {
          this.$message.success("创建成功");
          this.dialogVisible = false;
          this.getData();
          return;
        }

        if (res.existPhones.length === 0 && res.noneUser.length === 0) {
          this.$message.success("创建成功");
        } else {
          this.resultVisible = true;
          this.resultData = res;
        }

        this.dialogVisible = false;
        this.getData();
        this.phoneNumber = "";
      });
    },
    getData() {
      getContact().then(res => {
        this.tableData = res.map(item => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.avatar {
  height: 100px;
  width: 100px;
}
</style>
